<template>
  <el-row :gutter="22" class="course-list">
    <el-col :span="6" v-for="(item, index) in list" :key="index">
      <div class="item">
        <EduCourseImage
          :image="item.course_cover"
          :courseType="item.course_type"
          :courseTypeText="item.course_type_text"
          :height="110"
          :border-radius="4"
          @click="handleContinueLearning(item)"
        >
          <span class="time" v-if="expired">课程已过期</span>
          <span class="time" v-else>
            {{ item.expire_rest === -1 ? '永久有效' : `距离课程到期还有${item.expire_rest}天` }}
          </span>
        </EduCourseImage>
        <div class="desc">
          <div
            class="name"
            :class="{ 'expired-text': expired }"
            @click="handleContinueLearning(item)"
          >
            {{ item.course_title }}
          </div>
          <el-row type="flex" justify="space-between" v-if="!expired">
            <div class="progress">已学{{ item.finished_rate || 0 }}%</div>
            <el-link
              :underline="false"
              type="primary"
              class="btn"
              @click="handleContinueLearning(item)"
              >继续学习</el-link
            >
          </el-row>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import EduCourseImage from '@/components/EduCourseImage'
export default {
  components: {
    EduCourseImage
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 过期的课程
    expired: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 继续学习
    handleContinueLearning(item) {
      this.$router.push({ path: '/course/' + item.course_id })
    }
  }
}
</script>

<style lang="scss" scoped>
.course-list {
  .item {
    margin-bottom: 20px;
    .time {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.4);
    }
    .desc {
      margin-top: 10px;
      .name {
        font-size: 14px;
        color: $text-color-import;
        margin-bottom: 6px;
        @include ellipsis();
        cursor: pointer;
      }
      .expired-text {
        color: $text-color-auxiliary;
      }
      .progress {
        font-size: 12px;
        color: $text-color-auxiliary;
      }
      .btn {
        font-size: 12px;
      }
    }
  }
}
</style>
